https://www.youtube.com/watch?v=Al-0vNJD1JU
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <button class="hamburger"></button> </body> </html>
.hamburger {
width: 40px;
height: 35px;
border: 0;
border-top: 5px solid #ffffff;
background: transparent;
position: relative;
transition: 0.3s transform linear;
}
.hamburger::before, .hamburger::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
border-top: 5px solid #ffffff;
transform: translateY(10px);
}
.hamburger::after {
transform: translateY(25px);
transition: 0.3s transform linear;
}
.hamburger:focus {
transform: rotate(45deg) translateY(5px);
border: none;
}
.hamburger:focus::after {
transform: rotate(-90deg) translateX(-10px);
}
body {
padding: 0;
margin: 0;
overflow: hidden;
background: #696e9e;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}